<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<style type="text/css">
        #div1{
        	width:200px;height:200px;background: red;border:10px solid black;
        }
	</style>
	<script type="text/javascript">
	    window.onload = function(){
	    	//方案2：
	    	function getStyle(obj,name){
                if(obj.currentStyle){
                	return obj.currentStyle[name]; //取样式 兼容IE
                }else{
                	return getComputedStyle(obj,false)[name]; //兼容FF Chrome
                }
	    	}

	    	setInterval(function(){
                var oDiv = document.getElementById('div1');
                //offsetWidth实际宽度跟border，padding等相关 = width + border/padding
                //当没有边框时，程序正常运行，div逐渐变小
                //我加border=1后，bug出现，div没有变小，反而逐渐增大
                //当我加border=1时，它的实际offsetWidth=202，再加padding=10,它的实际offsetWidth=222,  offsetWidth实际获取的是盒模型尺寸
                

                //举例:
                //第一次：width = 200,offsetWidth=202,oDiv.offsetWidth-1=201,然后把201赋给width
                //第二次，width = 201,offsetWidth=203,oDiv.offsetWidth-1=202,然后再把201赋给width
                //第三次，width=202.........
                //以此类推，所以最后div的width每次增加1，而没有减小
                //oDiv.style.width = oDiv.offsetWidth-1+'px';
                //但是当我把oDiv.offsetWidth-2时，刚好去掉两边的边框，div没有变化
                //oDiv.style.width = oDiv.offsetWidth-2+'px';
                
                //解决方案1：把样式放在行间,直接用行间宽度
                //oDiv.style.width = parseInt(oDiv.style.width )-1+'px';
                //但是用这种方案，我把样式写外部就没有效果了，所以有方案2使用
                

                //解决方案2:
                oDiv.style.width = parseInt(getStyle(oDiv,'width'))-1+'px';
	    	}, 30);
	    	
	    }
       
	</script>
</head>
<body>

    <div id="div1" ></div>
	
</body>
</html>